<template>
  <div class="job-box">
    <div class="box-title">
      <span>热门岗位</span>
      <span class="city" v-show="isShowCountriy === 1" @mouseover="mouseOver" @mouseout="mouseOut">
        <span class="citys">全国</span>
        <span class="iconfont icon-xiangxia"></span>
        <div class="choose-city" v-show="isShow">
          <ul>
            <li v-for="city in city.zpData" :key="city.id">
              {{ city.name }}
            </li>
          </ul>
        </div>
      </span>
      <div class="city-wrap">
        <!-- 选择城市 -->
        <div class="city-list"></div>
      </div>
      <!-- 清除浮动 -->
      <div style="clear: both"></div>
    </div>
    <!-- 面包屑 -->
    <div class="position-type">
      <ul>
        <li class="active">全部</li>
        <li>技术</li>
        <li>产品</li>
        <li>设计</li>
        <li>运营</li>
        <li>市场</li>
        <li>人事/财务/行政</li>
        <li>销售</li>
        <li>传媒</li>
        <li>金融</li>
        <li>教育培训</li>
        <li>房地产/建筑</li>
        <li>供应链/物流</li>
        <li>采购/贸易</li>
        <li>咨询/翻译/法律</li>
        <li>旅游</li>
        <li>服务业</li>
        <li>生产制造</li>
        <li>高级管理</li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="position-list">
      <ul>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>前端开发（reactJS/半年项目/500强外企）</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">15-25K</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  北京
                  <span class="vline"></span>
                  3-5年
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/软通动力.png" alt="软通动力信息技术集团" />
                <span class="name">软通动力信息技术集团</span>
                <span class="type">计算机软件</span>
                <span class="vline"></span>
                <span class="level">已上市</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>数据开发</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">15-30K·13薪</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  成都
                  <span class="vline"></span>
                  经验不限
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/蚂蚁金服.jpg" alt="蚂蚁金服" />
                <span class="name">蚂蚁金服</span>
                <span class="type">互联网金融</span>
                <span class="vline"></span>
                <span class="level">D轮及以上</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>Lalamove资深java工程师（核心&海外业务）</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">30-45K</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  深圳
                  <span class="vline"></span>
                  5-10年
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/货拉拉.jpg" alt="货拉拉" />
                <span class="name">货拉拉</span>
                <span class="type">移动互联网</span>
                <span class="vline"></span>
                <span class="level">D轮及以上</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>（资深）前端开发专家-飞书企业应用</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">30-60K·15薪</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  上海
                  <span class="vline"></span>
                  5-10年
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/字节跳动.png" alt="北京字节跳动" />
                <span class="name">北京字节跳动</span>
                <span class="type">移动互联网</span>
                <span class="vline"></span>
                <span class="level">D轮及以上</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>嵌入式软件工程师</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">12-24K</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  深圳
                  <span class="vline"></span>
                  5-10年
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/大族光子.png" alt="大族光子" />
                <span class="name">大族光子</span>
                <span class="type">机械设备/机电/重工</span>
                <span class="vline"></span>
                <span class="level">不需要融资</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>软件开发工程师（海外留学生）-东莞</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">13-26K</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  东莞
                  <span class="vline"></span>
                  经验不限
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/华为.jpg" alt="华为技术有限公司" />
                <span class="name">华为技术有限公司</span>
                <span class="type">计算机软件</span>
                <span class="vline"></span>
                <span class="level">不需要融资</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>电源工程师</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">16-30K·15薪</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  北京
                  <span class="vline"></span>
                  经验不限
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/爱立信.jpg" alt="爱立信上海" />
                <span class="name">爱立信上海</span>
                <span class="type">通信/网络设备</span>
                <span class="vline"></span>
                <span class="level">不需要融资</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>电源工程师</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">16-30K·15薪</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  北京
                  <span class="vline"></span>
                  经验不限
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/爱立信.jpg" alt="爱立信上海" />
                <span class="name">爱立信上海</span>
                <span class="type">通信/网络设备</span>
                <span class="vline"></span>
                <span class="level">不需要融资</span>
              </a>
            </div>
          </div>
        </li>
        <li style="margin-top: 0">
          <div class="sub-li">
            <a href="javascript:;">
              <div class="sub-li-top">
                <div class="name">
                  <a>图形工具开发工程师</a>
                  <div class="guide-app-download-icon"></div>
                  <div style="clear: both"></div>
                </div>
                <p class="salary">27-45K·16薪</p>
                <div style="clear: both"></div>
              </div>
              <div class="job-text">
                <p>
                  杭州
                  <span class="vline"></span>
                  经验不限
                  <span class="vline"></span>
                  本科
                </p>
              </div>
            </a>
            <div class="sub-li-bottom">
              <a href="javascript:;">
                <img src="./images/网易.jpg" alt="网易" />
                <span class="name">网易</span>
                <span class="type">移动互联网</span>
                <span class="vline"></span>
                <span class="level">已上市</span>
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 查看更多 -->
    <div class="common-more">
      <router-link to="/">查看更多</router-link>
    </div>
  </div>
</template>

<script>
// 引入图标字体
import "./font/footer-turtles/iconfont.css"
// 引入热门岗位数据
import { reqGetPopularJobs } from "@/zwapi"
export default {
  name: "JobList",
  props: ["isShowCountriy"],
  data() {
    return {
      isShow: false,
      city: "全国",
    }
  },
  methods: {
    // 鼠标移入
    mouseOver() {
      this.isShow = true
    },
    // 鼠标移出
    mouseOut() {
      this.isShow = false
    }
  },
  async mounted() {
    this.city = await reqGetPopularJobs()
  }
};
</script>

<style lang="less" scoped>
.job-box {
  width: 1184px;
  margin: 50px auto;
  position: relative;

  .box-title {
    height: 42px;

    span {
      float: left;
      font-size: 15px;
      margin-top: 7px;
    }

    .city-wrap {
      float: left;
      margin-left: 10px;
      line-height: 20px;
      margin-top: 7px;
    }

    .city {
      line-height: 4px;
      color: #19d7c8;
      margin-left: 5px;
      cursor: pointer;

      .citys {
        font-size: 13px;
      }

      .choose-city {
        width: 400px;
        position: absolute;
        top: 25px;
        left: 60px;

        ul {
          position: absolute;
          display: flex;
          flex-wrap: wrap;
          background-color: #fff;
          box-shadow: 0 7px 20px 0 rgb(0 0 0 / 7%);

          li {
            width: 100px;
            height: 40px;
            font-size: 13px;
            text-align: center;
            line-height: 40px;
            color: #8d92a1;

            &:hover {
              color: #19d7c8;
            }
          }
        }
      }
    }
  }

  .position-type {
    ul {
      display: flex;
      flex-wrap: wrap;
      line-height: 35px;

      li {
        width: 90px;
        height: 34px;
        background-color: #fff;
        margin-right: 8px;
        margin-bottom: 16px;
        border-radius: 6px;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
      }

      .active {
        background-color: #5dd5c8;
      }
    }
  }

  .position-list {
    overflow: hidden;
    margin-bottom: 10px;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        width: 384px;
        height: 130px;
        background-color: #fff;
        margin-top: 16px;
        margin-bottom: 5px;
        cursor: pointer;

        &:hover {
          box-shadow: 0 0 10px gray;
        }

        &hover .sub-li-top .name a {
          color: #00c2b3;
        }

        .sub-li {
          width: 344px;
          height: 98px;
          padding: 16px 20px;

          a {
            .sub-li-top {
              width: 344px;
              height: 20px;
              text-decoration: none;

              .name {
                width: 160px;
                float: left;

                a {
                  max-width: 140px;
                  font-size: 15px;
                  float: left;
                  margin-right: 3px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }

                .guide-app-download-icon {
                  width: 15px;
                  height: 13px;
                  background: url("https://static.zhipin.com/zhipin-geek/v568/web/geek/images/guide-add-download-icon.png");
                  background-size: cover;
                  float: left;
                  margin-top: 3px;

                  &:hover {
                    background: url("https://static.zhipin.com/zhipin-geek/v568/web/geek/images/guide-add-download-icon-hover.png");
                    background-size: cover;
                  }
                }
              }

              .salary {
                font-size: 15px;
                color: #fd7240;
                float: right;
              }
            }

            .job-text {
              width: 240px;
              height: 28px;
              line-height: 28px;

              p {
                font-size: 13px;
                color: #8d92a1;

                .vline {
                  display: inline-block;
                  width: 1px;
                  height: 12px;
                  vertical-align: middle;
                  background: #e0e0e0;
                  margin: 0 10px;
                }
              }
            }
          }

          .sub-li-bottom {
            font-size: 13px;
            width: 344px;
            height: 32px;
            border-top: 1px solid gray;
            margin-top: 8px;
            padding-top: 12px;
            line-height: 32px;

            &:hover span {
              color: #666;
            }

            .vline {
              display: inline-block;
              width: 1px;
              height: 12px;
              vertical-align: middle;
              background: #e0e0e0;
              margin-top: 10px;
            }

            img {
              width: 30px;
              float: left;
            }

            span {
              max-width: 90px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: block;
              float: left;
              margin-left: 10px;
              margin-right: 10px;
            }


          }
        }
      }
    }
  }

  .common-more {
    width: 216px;
    height: 34px;
    background-color: #5dd5c8;
    margin: 0 auto;
    line-height: 34px;

    a {
      display: block;
      text-align: center;
      text-decoration: none;
      font-size: 15px;
      color: white;
    }
  }
}

img {
  width: 30px;
  height: 30px;
}
</style>